<template>
	<view class="content">
		<view class="pageHeader">
			物流信息
			<a class="generalBack" @click="backpage()" hover-class="none">
			 <image src="/static/b-1.png" style="width: 18upx;height: 30upx;"></image>
			 </a>
		</view>
		
		<view class="regoodbox">
			<view style="display: flex;padding: 30upx;">
				<view style="width: 164upx;height: 164upx;position: relative;">
					<image :src="ordermsg.images" style="width:164upx;height: 164upx;"></image>
					<view style="position: absolute;;left: 0;bottom:0;width: 100%;padding: 10upx 0;text-align: center;background-color: rgba(0,0,0,.5);font-size: 24upx;color: #fff;">
						{{passOrder.items_count}}件商品
					</view>
				</view>
				<view style="font-size:26upx;color: #666;line-height: 2;margin-left:30upx;">
					<view style="font-size: 30upx;color: #000;">物流状态：<text style="color: #EC6104;">{{delivertxt}}</text></view>
					<view>快递单号:{{passOrder.express_number}}</view>
					<view>承运公司:{{passOrder.express_name}}</view>
				</view>
			</view>
			<view class="total-wrap">
			  <view class="logistics-title">物流跟踪</view>
			  <view v-for="(item, index) in tracesData" :key="index">
			    <trackNode :is-first="index===tracesData.length-1" :is-newest="index===0" :node-data="item"></trackNode>
			  </view>
			</view>
		</view>
	</view>
	</template>
	<script>
	import postAjax from '../../API/postAjax.js'
	import trackNode from '../../components/delivery/trackNode.vue'
	export default {
		data() {
			return {
				userToken:'',// token
				passOrder:{},//传过来的数据
				deliverState:'',//物流状态
				delivertxt:'',// 物流状态wenzi
				ordermsg:[],//订单信息
				tracesData:[]
			}
		},
		components:{
			trackNode
		},
		onLoad(options) {
			let that = this
			console.log(JSON.parse(options.order))
			that.passOrder = JSON.parse(options.order)
			that.ordermsg = that.passOrder.items[0]
			that.userToken = uni.getStorageSync('token')
			that.orderdelivery(that.passOrder.express_id,that.passOrder.express_number)
		},
		methods: {
			// 返回上一页
			backpage(){
				uni.navigateBack({
					delta:1
				})
			},
			// 物流状态的判断
			stateTxt(state){
				let statext = ''
				// 快递单当前状态，包括0在途，1揽收，2疑难，3签收，4退签，5派件，6退回，7转单，10待清关，11清关中，12已清关，13清关异常，14收件人拒签等13个状态
				if(state==0){
					statext = '运输中'
				}else if(state==1){
					statext = '已揽收'
				}else if(state==2){
					statext = '疑难'
				}else if(state==3){
					statext = '已签收'
				}else if(state==4){
					statext = '已退签'
				}else if(state==5){
					statext = '正在派件'
				}else if(state==7){
					statext = '转单'
				}else if(state==10){
					statext = '待清关'
				}else if(state==11){
					statext = '清关中'
				}else if(state==14){
					statext = '已清关'
				}else if(state==14){
					statext = '清关异常'
				}else if(state==14){
					statext = '收件人拒签'
				}
				return statext
			},
			orderdelivery(orderid,deliveryid) {
				let that = this
				postAjax('order/logistics',{
					token:that.userToken,
					express_id:orderid,
					express_number:deliveryid,
				},function(data){
					console.log(data)
					if(data.code==0){
						that.tracesData = data.data.data
						that.deliverState = data.data.state
						that.delivertxt = that.stateTxt(that.deliverState)
					}else{
						that.orderdelivery(orderid,deliveryid)
						
						uni.showToast({
						  title:'物流查询失败',
						  icon:'none'
						})
					}
				})
			}
		}
	}
	
</script>

<style>
	.content{min-height: 100vh;background-color: #F9F9F9;}
	.pageHeader{position: fixed;top:0;left:0;z-index:999;width: 100%;height: 128upx;background-color: #1D84E8;line-height: 128upx;text-align: center;font-size: 36upx;color: #fff;padding-top: 40upx;}
	.generalBack{position: absolute;top:40upx;left:30upx;display: block;}
	.regoodbox{padding: 170upx 0upx 22upx;background-color: #fff;}
	.total-wrap {
	  width: 100vw;
	  height: auto;
	  box-sizing: border-box;
	  padding: 20upx;
	}
	.logistics-title {
		position: relative;
	    box-sizing: border-box;
	    padding:16upx 0;
		border-bottom:2upx solid #EEEEEE;
	    line-height: 28upx;
	    color: #4B4B4B;
	    font-size: 26upx;
	    font-family: 'PingFangSC-Medium';
	    text-align: left;
	}
</style>
